<template>
    <div class="frontIndex">
        <div class="header">
            <div>logo图标</div>
            <div>路由1</div>
            <div>路由2</div>
            <div>路由3</div>
            <div>路由4</div>
            <div>路由5</div>
            <div>路由6</div>
            <div>其他信息</div>
        </div>

        <div class="home">
            弹性布局模式
        </div>

        <div class="footer"></div>
        

    </div>
</template>


<script>
    export default {
        name: 'App',
        components: {

        },
        data() {
            return {
                isActive: false,
            }
        },
    }
</script>

<style scoped>
    * {
        margin: 0;
        padding: 0;
    }
    .frontIndex{
        widows: 100vw;
        height: fit-content;
        background-color: aqua;
    }
    .header{
        display: flex;
        flex-direction: row;
    }
    .header div{
        background-color: beige;
        /* margin: 0 10px; */
        width: fit-content;
        height: 50px;
        flex-grow: 1;
        text-align: center;
        line-height: 3em;
    }
    .header div:nth-child(1){
        margin-left: 0;
    }
    .header div:nth-last-child(1){
        margin-right: 0;
        flex-grow: 2;
    }
    .home{
        margin: auto;
        background-color: aliceblue;
        width: 80vw;
        height: 5000px;
    }
</style>